<template>
	<view class="page-wrap" :class="detail.id ? 'bg-fff': ''" :data-theme="theme" :class="theme">
		<view :data-theme="theme" :class="theme" :style="globalColor.style">
			<HeadCustom title="" :isCircle="true" :isSpace="false" :isAppBtn="!isApp" :isHome="!isApp">
				<!-- <view slot="right" v-if="isApp && !preview" class="font30 lh44 opacity80 fboxRow Ycenter Xcenter action-text action-btn" @click="isAction = true"><text class="bwfont bw-dian"></text></view> -->
				<view slot="right" v-if="isApp && !preview" class="font30 lh44 opacity80 fboxRow Ycenter Xcenter action-text action-btn" @click="transmit"><text class="bwfont bw-zhuanfa"></text></view>
			</HeadCustom>
		</view>
		<view :style="{height: statusBarHeight+'px'}"></view>
		<view style="height: 88rpx;"></view>
		<HeadMore :show.sync="isAction" :list="actionList" @action="actionTap" />
		<view class="article hotAricle bui-article" v-if="detail.id">
			<view class="title font38">{{detail.title}}</view>
			<view class="info fboxRow font24">
				<text class="txt_msg">{{detail.editTime}}</text>
				<text v-if="detail.author" class="txt_msg">作者：{{detail.author}}</text>
				<text v-if="detail.articleSource" class="txt_msg">来源：{{detail.articleSource}}</text>
			</view>
			<!-- <view class="line_box"></view> -->
			<view class="userInfo fboxRow" v-if="detail.quoteMemberVO" @click="goApp">
				<image class="avatar" :src="detail.quoteMemberVO.imagePhoto" mode="aspectFill"></image>
				<view class="line"></view>
				<view class="fboxCol detail_msg">
					<view class="name font32 flex1">{{detail.quoteMemberVO.realName}}</view>
					<view class="flex1 font28 user_msg mt24" v-if="detail.quoteMemberVO.companyName">
						<text class="bw-Vector8 bwfont icon_txt"></text>
						{{detail.quoteMemberVO.companyName}}
					</view>
					<view class="flex1 font28 user_msg mt10" v-if="detail.quoteMemberVO.positionName">
						<text class="bw-a-zu3478 bwfont icon_txt"></text>
						{{detail.quoteMemberVO.positionName}}
					</view>
				</view>
			</view>
			<view class="detail rich_media_content">
				<view class="font32 content" v-html="detail.content"></view>
				<!-- <rich-text class="font32 content" :nodes="detail.content" @itemclick="goImgDetials">
				</rich-text> -->

				<view class="reminder font28">以上文章内容，不代表本无名片平台观点，内容授权、投诉请联系 benwu@benwunet.com</view>
			</view>

			<!-- <view class="line_box"></view> -->
			<view class="viewYy fboxRow Ycenter font28" v-if="!preview">
				<view class="flex1 fboxRow Ycenter">
					<!-- <template>
						<text>引用</text>
						<view class="yyUser flex1 fboxRow Ycenter" @click="goPage">
							<image class="img_box" :src="item.imagePhoto"
								v-for="(item, index) in detail.memberList"
								:key="index" :style="{transform: `translateX(-${index * 20 }rpx)`}" mode="aspectFill"></image>
							<view class="img_more fboxRow Ycenter Xcenter" :style="{transform: `translateX(-${detail.memberList && detail.memberList.length * 20 }rpx)`}"><u-icon name="more-dot-fill" color="#A7ABB5"></u-icon></view>
						</view>
					</template> -->
				</view>
				<view class="">阅读{{detail.eye || 0}}次</view>
			</view>
			<!-- <view class="hotRec"></view>
			<view class="hotRecommended font32">
				<view class="recommendedTitle">
					<view style="margin-bottom: 20rpx;">热文推荐</view>
					<view class="recommendedDetail font32 font-ell1" v-for="(item, index) in recommendedList" :key="index" @tap="$pageTo('/hotArticle/detail?id='+item.id)">{{ index + 1 }}.{{ item.title }}</view>
				</view>
			</view> -->
			<template v-if="preview">
				<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
					<view class="btn_box fboxRow"><view class="flex1 font32" @tap="back">返回</view></view>
				</u-tabbar>
			</template>
			<!-- <template v-if="!isApp">
				<template v-if="(pageType == 0 || userInfo.memberId != (detail.quoteMemberVO && detail.quoteMemberVO.cardId))&&pageType != 2">
					<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
						<view class="btn_box fboxRow"><view class="flex1 font32" @tap="goQuote">我要引用</view></view>
					</u-tabbar>
				</template>
				<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" v-if="pageType == 2 || (detail.quoteMemberVO && detail.quoteMemberVO.cardId)">
					<view class="btn_box fboxRow"><view class="flex1 font32" @tap="transmit"><text class="bwfont bw-zhuan"></text>转发</view></view>
				</u-tabbar>
			</template> -->
		</view>
		<not-login ref="notLogin" />
	</view>
</template>

<script>
import ArticleItem from './components/article-item.vue';
import HeadMore from '@/components/head-custom/head-more.vue';
import { hotTextDetail, hotList, hotQuoteDetail, hotQuote } from '@/api/h5';
import { utf8to16, base64decode } from '@/static/js/Base64.js';
import { getRequest } from '@/static/js/common.js';
import {wxSdk} from '@/static/js/wxjsdk.js';
export default {
	components: { ArticleItem, HeadMore },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			isAction: false,
			actionList: [{ label: '转发', value: 1 , icon: 'bw-zhuanfa'}], //,{ label: '我引用的文章', value: 3,  icon: 'bw-lianjie' } { label: '收藏', value: 2 }, 
			detail: {},
			isApp: true,
			id: '', // '439712969060777984'
			memberId: '',
			pageType: 0, // 0 平台热文，1别人查看个人引用热文, 2个人引用热文
			preview: 0,
			recommendedList: [],
			userInfo: {},
			statusBarHeight: 0,
			shareDataId: ''
		};
	},
	onLoad(option) {
		uni.setNavigationBarTitle({title: '本无热文'})
		let token = {}
		if(option && option.benwu){
			let benwu = utf8to16(base64decode(option.benwu))
			this.benwu = option.benwu
			token = {
				// access_token: getRequest(benwu,'token'),
				// id: getRequest(benwu,'id'),
				statusBarHeight: getRequest(benwu,'statusBarHeight'),
				// authStatus: getRequest(benwu,'authStatus'),
			}
			if(getRequest(benwu,'token')){
				token.access_token = getRequest(benwu,'token')
			}
			getApp().globalData.statusBarHeight = token.statusBarHeight
			// this.id = token.id
			uni.setStorageSync('bw_params', JSON.stringify(token));
		}
		if(option && option.isApp){
			this.isApp = option.isApp == 1 ? true : false
		}else{
			const {bw_link} = getApp().getBWData(['bw_link'])
			this.isApp = bw_link.isApp == 1 ? true : false
		}
		if(option.pageType){
			this.pageType = option.pageType
		}
		if(option.preview){
			this.preview = option.preview
		}
		if (option.id) {
			if(option.id == 'hotArticleTemp'){
				this.detail = getApp().globalData.hotArticleTemp
			}else{
				this.id = option.id
				this.getDetail();
			}
		}
		// this.getRec()
		const {bw_user_temp, bw_params} = getApp().getBWData(['bw_user_temp', 'bw_params'])
		this.userInfo = bw_user_temp
		this.statusBarHeight = bw_params.statusBarHeight
	},
	methods: {
		goImgDetials(e){
			console.log(e)
		},
		back(){
			uni.navigateBack()
		},
		// 跳转我要引用
		goQuote(){
			const {bw_params} = getApp().getBWData(['bw_params'])
			if(bw_params.access_token){
				this.$pageTo('/hotArticle/quote?id='+this.detail.id+'&pageType='+this.pageType)
			}else{
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				})
			}
		},
		// 跳转APP名片详情，跟app做交互
		goApp(){
			const {bw_link} = getApp().getBWData(['bw_link'])
			if(bw_link.isApp != 1){
				this.$pageTo('/CardDetail',{id: this.detail.quoteMemberVO.cardId})
			}else{
				const data = {
					type: 'card',
					memberId: this.detail.quoteMemberVO.cardId
				}
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
			}
		},
		// 热文引用相关用户
		goPage() {
			const {bw_params} = getApp().getBWData(['bw_params'])
			if(bw_params.access_token){
				this.$pageTo(`/hotArticle/userCount?id=${this.id}`);
			}else{
				this.$refs.notLogin.openLogin({
					show: true,
					position: 'center'
				})
			}
		},
		// 获取热文详情
		getDetail() {
			hotTextDetail({ id: this.id, type: this.pageType == 0 ?  0 : 1 }).then(res => {
				res.data.content = res.data.content.replace("677px", "100%")
				this.detail = res.data;
				uni.setNavigationBarTitle({
					title: res.data.title
				})
				let con =  res.data.content.replace(/<\/?.+?>/g,'')
				 con =  con.replace(/[\r\n]/g,'')
				const data = {
					type: 'meta',
					title: res.data.title,
					imgUrl: res.data.img,
					desc: con,
					link: window.location.href
				}
				this.$bridge.callHandler('appHandler', data, () => {
					console.log('recruitHandler', '返回')
				})
				console.log(data)
				
				wxSdk.setShareData(data, data)
			});
		},
		// 获取推荐列表
		getRec(){
			hotList({ cid: 0, current:1, size:5}).then(res=>{
				this.recommendedList = res.data.list
			})
		},
		// 热文头部操作 我引用的，转发
		actionTap(e){
			if(e.item.value == 3){
				this.$pageTo(`/hotArticle/hotMine`)
			}else if(e.item.value == 1){
				this.transmit()
			}
		},
		// 转发内容
		transmit(){
			// 转发时自动引用文章，多次转发只执行一次
			const {bw_user_temp, bw_params} = getApp().getBWData(['bw_user_temp', 'bw_params'])
			if(!bw_params.access_token || this.detail.type == 1 && (bw_user_temp && bw_user_temp.memberId == this.detail.quoteMemberVO.cardId)){
				this.quote(this.detail.id)
			}else{
				if(this.shareDataId){
					this.quote(this.shareDataId)
				}else{
					hotQuote({id: this.detail.id, type:this.detail.type }).then(res=>{
						if(res.data){
							// this.$pageTo(`/hotArticle/detail?id=${res.data}&pageType=2`,'redirectTo')
							this.shareDataId = res.data
							this.quote(res.data)
						}
					})
				}
			}
		},
		quote(id){
			let con = this.detail.content.replace(/<\/?.+?>/g,'')
			con =  con.replace(/[\r\n]/g,'')
			const href = `${location.origin}${location.pathname}#/hotArticle/detail?id=${id}&pageType=${this.detail.type}`
			const data = {
				type: 'shareHotArticle',
				link: href,
				title: this.detail.title,
				imgUrl: this.detail.img,
				desc: con.substr(0,50) || href
			}
			this.$bridge.callHandler('appHandler', data, () => {
				console.log('recruitHandler', '返回')
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.page-wrap{line-height: 1.6;}
	// *{box-sizing: border-box;}
	.bg-fff{background-color: #fff;}
	.article{width: 750rpx;overflow: hidden;}
	.action-text{}
	.action-btn{width: 56rpx;height: 56rpx;background: rgba(0,0,0,0.2);border-radius: 50%;text-align: center; align-items: center;justify-content: center;}
::v-deep .u-tabbar__content {
	background-color: #fff;
	border: none;
	.u-tabbar__content__item-wrapper {
		height: 120rpx;
	}
}
::v-deep .content {
	img {
		max-width: 100%;
		height: auto;
	}
}
.article {
	padding: 20rpx 0 40rpx;
	
	.title {
		padding: 0 40rpx;
		line-height: 54rpx;
		color: #000;
	}
	/deep/ p{margin: 0;margin-block-start:0;margin-block-end: 0}
	.info {
		padding: 0 40rpx 20rpx;
		color: #747986;
		margin: 18rpx 0;
		.txt_msg {
			margin-right: 28rpx;
		}
	}
	.line_box {
		height: 1px;
		background: #1e222f;
		margin: 38rpx 0;
	}
	.viewYy {
		padding:40rpx 40rpx 0;
		color: #747986;
		justify-content: flex-end;
		.yyUser {
			height: 60rpx;
			// background: linear-gradient(91deg, var(--viewBgColor) 4%, rgba(26, 29, 37, 0.05) 99%);
			border-radius: 56rpx 56rpx 56rpx 56rpx;
			margin-left: 20rpx;
			padding-left: 10rpx;
			.img_box {
				height: 45rpx;
				width: 45rpx;
				border-radius: 50%;
				
			}
			.img_more{width: 45rpx;height: 45rpx;background: #E6E8EE;border-radius: 50%;}
		}
	}
	.detail {
		// padding-top: 40rpx;
		padding: 0 40rpx 0 40rpx;
		text-align: justify;
		min-height: calc(100vh);
		// color: var(--contentFontLightColor);
		// line-height: 44rpx;
	}
	.hotRec {
		height: 24rpx;
		background: #111018;
		margin: 32rpx 0 14rpx 0;
	}
	.hotRecommended {
		padding: 26rpx 40rpx;
		.recommendedTitle {
			font-weight: bold;
			color: #ffffff;
			.recommendedDetail {
				font-weight: 400;
				color: #747986;
				line-height: 72rpx;
			}
		}
	}
	.reminder {
		margin-top: 40rpx;
		color: #747986;
		line-height: 40rpx;
	}
	.userInfo {
		margin: 0 40rpx 40rpx 40rpx;
		height: 214rpx;
		border-radius: 8rpx;
		background: #F4F8FB;
		align-items: center;
		position: relative;
		overflow: hidden;
		.avatar {
			height: 214rpx;
			width: 230rpx;
			// border: 1px dashed #ccc;
		}
		.line{position: absolute;left: 215rpx;top: 0; width: 40rpx;height: 224rpx;background-color: #F4F8FB;transform: rotate(6deg);z-index: 1;}
		.detail_msg {
			padding: 28rpx;
			height: 100%;
			position: relative;z-index: 2;
			.name {
				font-weight: bold;
				line-height: 44rpx;
				color:#111018
			}
			.user_msg {
				color: #6D6D76;
				line-height: 46rpx;
				.icon_txt {
					font-size: 26rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
}
</style>
